<template>
  <div class="process-desktop">
    <div class="process__left">
      <h2 class="text-blue-dark">{{ data?.title }}</h2>
      <ul class="process-list my-10">
        <li
          v-for="(item, idx) in data?.processes"
          :key="item.id"
          class="process-item"
          :class="{ 'is-active': idx == activeIdx }"
          @click="activeIdx = idx"
        >
          <div class="item-date tx-body-big">
            {{ item.date }}
          </div>
          <div class="item-num" :ref="(el: HTMLElement) => { if (el) numRefs.push(el as HTMLElement) }">
            {{ idx + 1 }}
          </div>
          <h6 class="item-title">
            {{ item.title }}
          </h6>
        </li>
        <div
          class="progress"
          :style="[
            {
              '--bar-height': barHeight,
            },
            {
              '--bar-left': `${barleft}px`,
            },
          ]"
        >
          <div
            class="progress-bar"
            role="progressbar"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
        </div>
      </ul>
      <div>
        <btn-list :list="data?.btnList" />
      </div>
    </div>
    <div class="process__right">
      <div
        v-for="(item, idx) in data?.processes"
        :key="item.id"
        class="process__right__wrapper"
        :class="{ 'is-active': activeIdx == idx }"
      >
        <div class="process__info" :style="{'--scroll-bar-height': `${scrollBarHeight}px`}">
          <div class="process__info__num">
            {{ idx + 1 }}
          </div>
          <div class="process__info__title">
            {{ item.title }}
          </div>
          <ScrollBar light>
            <div
              class="process__info__text"
              v-html="item.desc"
            ></div>
            <div class="process__info__link">
              <link-list :list="item.linkList" />
            </div>
          </ScrollBar>
        </div>

        <div class="process__img" v-if="item.imgSrc">
          <div class="img-wrapper">
            <img :src="item.imgSrc" :alt="item.alt || item.title" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue'
import ScrollBar from '@/common/ScrollBar/index.vue'
import btnList from '@/components/BtnList/btnList.vue'
import linkList from '@/components/LinkLIst/linkList.vue'

// 定义组件名称
defineOptions({
  name: 'ProcessDesktop'
})

const props = defineProps({
  data: Object,
  activeIdx: Number
})

// 定义 emits
const emit = defineEmits<{
  updateIdx: [value: number]
}>()

// 响应式数据
const barleft = ref(72)
const scrollBarHeight = ref(250)
const vsWidth = ref(typeof window === 'undefined' ? 1024 : window.innerWidth)
const numRefs = ref<HTMLElement[]>([])

const barHeight = computed(() => {
  const length = props.data?.processes?.length
  if (!length || length <= 1) return '0%'
  return `${(activeIdx.value / (length - 1)) * 100}%`
})

const activeIdx = computed({
  get() {
    return props.activeIdx ?? 0
  },
  set(newValue: number) {
    emit('updateIdx', newValue)
  }
})

// 方法
const updateViewportSize = () => {
  vsWidth.value = (typeof window === 'undefined' ? 1024 : window.innerWidth)
}

const calBarLeft = () => {
  const nums = numRefs.value
  if (!nums || nums.length === 0) return

  const firstNum = nums[0]
  if (!firstNum) return

  const left = firstNum.offsetLeft
  const numHalf = firstNum.clientWidth / 2
  barleft.value = left + numHalf
}

// 监听器
watch(vsWidth, () => {
  calBarLeft()
})

// 生命周期钩子
onMounted(() => {
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', updateViewportSize)
  }
  updateViewportSize()

  // 清空 refs 数组
  numRefs.value = []

  nextTick(() => {
    calBarLeft()
  })
})

onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', updateViewportSize)
  }
})
</script>

<style lang="scss" scoped>
.text-blue-dark {
  --bs-text-opacity: 1;
  color: rgba(0,50,160,var(--bs-text-opacity))!important;
}
.my-10 {
  margin-top: 40px!important;
  margin-bottom: 40px!important
}

.tx-body-big {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em
}

@media(max-width: 1023.98px) {
  .tx-body-big {
      line-height:1.25;
      letter-spacing: .04em
  }
}

@media(max-width: 767.98px) {
  .tx-body-big {
      font-size:14px;
      line-height: 1.285;
      letter-spacing: .02em
  }
}
.img-wrapper {
  position: relative;
  height: 0;
  width: 100%
}

.process-desktop {
  display: flex;

  .process__left {
    flex: 1 1 632px;
    padding: 46px 16px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e9ecef;
    min-height: 550px;

    .process-list {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      z-index: 1;

      li:not(:last-of-type) {
        margin-bottom: 36px;
      }

      .progress {
        position: absolute;
        height: calc(100% - 30px);
        width: 1px;
        top: 10px;
        left: var(--bar-left, 72px);
        background-color: #adb5bd;
        z-index: -1;
        vertical-align: baseline;

        .progress-bar {
          width: 100%;
          height: var(--bar-height, 0);
          background-color: #0032a0;
          transition: height 0.3s ease-in-out;
        }
      }
    }

    .process-item {
      display: flex;
      align-items: center;
      cursor: pointer;

      .item-date,
      .item-title {
        color: #0032a0;
        transition: color 0.15s ease-in-out 0.3s, opacity 0.3s ease-in-out;
      }

      .item-date {
        min-width: 48px;
      }

      .item-num {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #0032a0;
        color: #f8f9fa;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        margin-left: 24px;
        margin-right: 44px;
        flex-shrink: 0;
        transition: background-color 0.15s ease-in-out 0.3s, opacity 0.3s ease-in-out;
      }

      &:hover {
        .item-date,
        .item-title {
          opacity: 0.7;
        }

        &.is-active {
          .item-date,
          .item-title,
          .item-num {
            opacity: 1;
          }
        }
      }

      &.is-active {
        .item-date,
        .item-title {
          color: red;
        }

        .item-num {
          background-color: red;
        }
      }
    }
  }


  .process__right {
    flex: 1 1 650px;
    background-color: #0032a0;
    position: relative;

    &__wrapper {
      display: flex;
      justify-content: center;
      padding: 69px 78px 24px 60px;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease-in-out;

      @media (max-width: 1023.98px) {
        padding: 69px 40px 24px 32px;
      }

      &.is-active {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .process__info,
    .process__img {
      flex: 1 1 240px;
      max-width: 240px;
    }

    .process__info {
      display: flex;
      flex-direction: column;
      min-width: 200px;

      &:only-child {
        max-width: 100%;
      }

      > .scroll-bar {
        :deep(.simple-bar) {
          max-height: var(--scroll-bar-height, 250px);
        }
      }

      &__num {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
        font-size: 33.3333px;
        color: #f8f9fa;
        margin-bottom: 24px;
      }

      &__title {
        color: #f8f9fa;
        font-size: 26px;
        line-height: 1.692;
        margin-bottom: 24px;

        @media (max-width: 1023.98px) {
          font-size: 20px;
          line-height: 1.25;
          margin-bottom: 16px;
        }
      }

      &__text {
        padding-right: 16px;
        color: #f0f5fc;

        :deep(p),
        :deep(ol),
        :deep(ul),
        :deep(li),
        :deep(em),
        :deep(b),
        :deep(strong) {
          color: #f0f5fc;
        }

        :deep(ul li) {
          &::before {
            background: #f0f5fc;
          }
        }

        :deep(a) {
          color: #f0f5fc;
          background-image: linear-gradient(to right, #f0f5fc, #f0f5fc);
        }
      }

      &__link {
        margin-top: 24px;
      }
    }

    .process__img {
      margin-left: 32px;
      min-width: 100px;

      @media (max-width: 1023.98px) {
        margin-left: 16px;
      }

      .img-wrapper {
        padding-bottom: 133.33%;
        position: relative;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .process__info__link {
    display: flex;
    align-items: center;
  }
}

.process-desktop .process__right .process__info__text * {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}
</style>
